<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
</head>
<body>
    <div class="searchPage">
        <div class="header">
            <div class="leftSide">
                <ul class="">
                    <li class="li page">
                       <a>主页</a>
                    </li>
                    <li class="li category">
                       <a>百科分类</a>
                        <ul class="toggelMenu">
                            <li>
                                <a href="">虚拟货币</a>
                            </li>
                            <li>
                                <a href="">代币（ICO）</a>
                            </li>
                            <li>
                                <a href="">项目名称</a>
                            </li>
                            <li>
                                <a href="">专有名词</a>
                            </li>
                            <li>
                                <a href="">交易所</a>
                            </li>
                            <li>
                                <a href="">人物</a>
                            </li>
                            <li>
                                <a href="">事件</a>
                            </li>
                        </ul>
                    </li>
                    <li class="li rank">
                        <a>评级榜单</a>
                    </li>
                </ul>
            </div>
            <div class="rightSide">
                个人中心
            </div>
        </div>
        <div class="container contentArea">
            <div class="logo">
                <a href="">
                    <img src="images/logo.png" alt="">
                </a>
            </div>
            <div class="form">
                <form action="">
                    <div>
                        <input type="text" placeholder="搜索您的区块链信息..." id="searchText">
                        <input type="submit" value="链百科">
                    </div>
                    <div class="itemList">
                        <ul>
                            <li>
                                <a href="">1</a>
                            </li>
                            <li>
                                <a href="">12</a>
                            </li>
                            <li>
                                <a href="">1234</a>
                            </li>
                            <li>
                                <a href="">12345</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            <div class="createWord">
                <span>创建我的区块链词条</span>
            </div>
        </div>
    </div>
    <div class="footer">
        <p >
            Copyright：2018 链百科 鄂ICP证030173号
        </p>
        <p>
            武汉市代劳科技有限责任公司-链百科团队出品
        </p>
    </div>
    <script>
        $('.category').on('mouseenter',function () {
            $('.toggelMenu').fadeIn(300)
        }).on('mouseleave',function () {
            $('.toggelMenu').fadeOut(300)
        });
        var k=0;
        $('#searchText').on('keyup',function (e) {
            e.preventDefault()
            if($('#searchText').val()){
                $('.itemList').show()
                $('.itemList li').on('mouseenter',function () {
                    console.log(123)
                    $('#searchText').val( $(this).find('a').html())
                })
                var length =$('.itemList').find('li').length
                if(e.keyCode==38){
                    if(k==0){
                        k =length-1
                    }else{
                        k--
                    }
                    $('.itemList').find('li').eq(k).addClass('active').siblings().removeClass('active')
                    $('#searchText').val( $('.itemList').find('li').eq(k).find('a').html())
                }else if(e.keyCode==40){
                    if(k==length-1){
                        k=0
                    }else {
                        k++
                    }
                    $('.itemList').find('li').eq(k).addClass('active').siblings().removeClass('active')
                    $('#searchText').val( $('.itemList').find('li').eq(k).find('a').html())
                }
            }else{
                $('.itemList').hide()
            }

        })

        $('#searchText').on('blur',function (e) {
            $('.itemList').hide()
        })
    </script>

</body>
</html>
